<template>
  <div>
    <van-nav-bar title="个人信息编辑" left-arrow>
      <template #right>
        <van-icon color="#000" name="wap-home-o" size="20" />
      </template>
    </van-nav-bar>
    <div class="head_img">
      <van-uploader :after-read="afterRead">
        <img :src="user.head_img | joinPath" alt />
      </van-uploader>
    </div>
    <van-cell
      title="昵称"
      @click="changeNickname"
      is-link
      :value="user.username"
    />
    <van-dialog v-model="nickNameshow" title="标题" show-cancel-button>
      <van-field
        v-model="username"
        required
        label="用户名"
        placeholder="请输入用户名"
      />
    </van-dialog>
    <van-cell title="密码" is-link value="***********" />
    <van-cell title="性别" is-link :value="user.gender == 1 ? '男' : '女'" />
  </div>
</template>

<script>
import { userInfo, upload, update } from "../api/user";
export default {
  data() {
    return {
      user: {},
      id: null,
      nickNameshow: false,
      username: "",
    };
  },
  created() {
    this.id = localStorage.getItem("ly-14-userId");
    userInfo(this.id).then((res) => {
      // console.log(res);
      this.user = res.data.data;
    });
  },
  methods: {
    changeNickname() {
      this.nickNameshow = true;
    },
    afterRead(file) {
      this.user.id = localStorage.getItem("ly-14-userId");
      console.log(this.user.id);
      let formData = new FormData();
      formData.append("file", file.file);
      upload(formData).then((res) => {
        // console.log(res);
        update(this.id, {
          head_img: res.data.data.url,
        }).then((result) => {
          // console.log(result);
          if (result.data.message === "修改成功") {
            this.user.head_img = result.data.data.head_img;
          } else {
            this.$toast.fail(res.data.message);
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .van-nav-bar {
  border-bottom: 1px solid #ddd;
  .van-icon-arrow-left {
    color: #000;
  }
}
.head_img {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  img {
    width: 100%;
  }
}
.van-cell {
  border-bottom: 1px solid #dddd;
}
</style>